<template>
  <div class="content-box-full">
    <ContainerBox>
      <template #header>
        <el-form @keyup.enter.native="handleSearch" :model="searchForm" label-width="auto" inline>
          <el-row>
            <el-col :span="8">
              <el-form-item label="员工号:" prop="workNo">
                <el-input
                  placeholder="空格分隔可以查询多条数据"
                  v-model="searchForm.workNo"
                  type="text"
                  autocomplete="off"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="食堂:" prop="canteenName">
                <el-popover
                  popper-class="form-item-popper"
                  placement="bottom-start"
                  trigger="click"
                >
                  <el-tree
                    class="common-el-tree hx-scroll"
                    :data="canteenTreeData"
                    node-key="id"
                    ref="searchCanteenTreeRef"
                    :default-expand-all="true"
                    :highlight-current="true"
                    :props="{
                      children: 'treeNode',
                      label: 'name',
                    }"
                    @check-change="searchCheckChange"
                    show-checkbox
                    :expand-on-click-node="false"
                  >
                  </el-tree>
                  <template #reference>
                    <el-input
                      v-model="searchForm.canteenCheckNames"
                      readonly
                      placeholder="点击勾选查询食堂"
                      class="menu-list__input"
                    ></el-input>
                  </template>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备编号:" prop="equipmentNumber">
                <el-input v-model="searchForm.equipmentNumber" type="text" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="刷卡日期:" prop="dateRange">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :shortcuts="shortcuts"
            />
          </el-form-item>
          <el-form-item>
            <el-button v-prevent-reclick type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleExport" v-prevent-reclick>导出</el-button>
            <el-button @click="handleData" v-prevent-reclick>数据处理</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #default>
        <el-table
          :data="tableData"
          :empty-text="isLoadingTable ? '加载中...' : '暂无数据'"
          class="table-box"
          height="100%"
          stripe
          fit
          border
          highlight-current-row
        >
          <el-table-column type="index" align="center" label="序号" width="80"></el-table-column>
          <el-table-column label="员工号" align="center" min-width="120" prop="userId">
          </el-table-column>
          <el-table-column label="员工姓名" align="center" min-width="120" prop="name">
          </el-table-column>
          <!--          <el-table-column label="性别" align="center" min-width="120" prop="canteen">-->
          <!--          </el-table-column>-->
          <el-table-column label="员工组" align="center" min-width="100" prop="employeeClass">
          </el-table-column>
          <el-table-column label="工资范围" align="center" min-width="120" prop="payGroup">
          </el-table-column>
          <!--          <el-table-column label="档案分组" align="center" min-width="100" prop="employeeClass">-->
          <!--          </el-table-column>-->
          <!--          <el-table-column label="部门名称" align="center" min-width="100" prop="organizationLabel">-->
          <!--          </el-table-column>-->
          <!--          <el-table-column label="职位名称" align="center" min-width="100" prop="equipmentIp">-->
          <!--          </el-table-column>-->
          <el-table-column label="入职日期" align="center" min-width="120" prop="efferDate">
          </el-table-column>
          <el-table-column label="离职日期" align="center" min-width="100" prop="leaveDate">
            <template #default="{ row }">
              <span v-if="row['leaveDate'] !== '0'">{{ row['leaveDate'] }}</span>
              <span v-else></span>
            </template>
          </el-table-column>
          <el-table-column label="消费时段" align="center" min-width="100" prop="periodName">
            <template #default="{ row, column }">
              <span>{{ getPeriodNameFn(row[column.property]) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="消费金额" align="center" min-width="100" prop="consumeMoney">
          </el-table-column>
          <!--          <el-table-column label="刷卡日期" align="center" min-width="100" prop="transactionTime">-->
          <!--          </el-table-column>-->
          <el-table-column label="刷卡时间" align="center" min-width="120" prop="transactionTime">
          </el-table-column>
          <el-table-column label="公司补贴" align="center" min-width="100" prop="companyPayfee">
          </el-table-column>
          <el-table-column label="个人承担" align="center" min-width="100" prop="selfPayfee">
          </el-table-column>

          <el-table-column label="消费余额" align="center" min-width="100" prop="serialNumber">
          </el-table-column>
          <el-table-column label="设备编号" align="center" min-width="100" prop="equipmentNumber">
          </el-table-column>
          <el-table-column label="设备名称" align="center" min-width="120" prop="equipmentName">
          </el-table-column>
          <el-table-column label="食堂编号" align="center" min-width="100" prop="canteen">
          </el-table-column>
          <el-table-column label="食堂名称" align="center" min-width="100" prop="canteenLabel">
          </el-table-column>
          <el-table-column label="员工分类" align="center" min-width="120" prop="employeeClass">
          </el-table-column>
          <el-table-column
            label="成本中心编码"
            align="center"
            min-width="100"
            prop="organizationCode"
          >
          </el-table-column>
          <el-table-column
            label="成本中心名称"
            align="center"
            min-width="100"
            prop="organizationLabel"
          >
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <CommonPaging
          :total="tableTotal"
          :current-page="pageNum"
          @currentChange="handleCurrentChange"
          @sizeChange="handleSizeChange"
        ></CommonPaging>
      </template>
    </ContainerBox>
  </div>
</template>
<script setup>
import ContainerBox from '@/components/base/ContainerBox.vue'
import { ref, onMounted, computed, nextTick, getCurrentInstance } from 'vue'
import CommonPaging from '@/components/base/CommonPaging.vue'
import message from '@/utils/elMessage.js'
import { usePublicStore } from '@/stores/publicInfo.js'
import consumptionReportApi from '@/api/consumptionReportApi.js'
import { useDatePicker } from '@/useHook/useDatePicker.js'
import { PERIOD_TIME_LIST } from '@/utils/systemConfig.js'

const { proxy } = getCurrentInstance()
const { shortcuts, setDefDate } = useDatePicker()

onMounted(() => {
  searchForm.value.dateRange = setDefDate()
  fetchList()
})

const publicStore = usePublicStore()
const canteenTreeData = computed(() => publicStore.sysAreaEntityList)
const searchForm = ref({
  workNo: '', //员工号
  canteenCheckNames: '', //食堂名称
  canteenCheckIds: [], //食堂ids
  equipmentNumber: '', //设备编号
  dateRange: [], //刷卡日期
})
const searchCanteenTreeRef = ref(null)
const pageNum = ref(1)
const pageSize = ref(10)

function searchCheckChange() {
  const checkLeafNodes = searchCanteenTreeRef.value.getCheckedNodes(true, false)
  searchForm.value.canteenCheckNames = checkLeafNodes.map((el) => el.name).join('、')
  // searchForm.value.canteenCheckIds = searchCanteenTreeRef.value.getCheckedKeys(true)
  searchForm.value.canteenCheckIds = checkLeafNodes.map((el) => el.code)
}

//查询
function handleSearch() {
  console.log(searchForm.value, 'searchForm')
  handleCurrentChange(1)
}

// 导出数据
function handleExport() {
  console.log(searchForm.value, 'searchForm')
}

//数据处理
function handleData() {}

// 列表数据
const isLoadingTable = ref(false)
const tableData = ref([])
const tableTotal = ref(0)

function fetchList() {
  isLoadingTable.value = true
  tableData.value = []
  const dateRange = searchForm.value.dateRange || ['', '']
  const params = {
    page: pageNum.value,
    limit: pageSize.value,
    userId: searchForm.value.workNo,
    canteens: searchForm.value.canteenCheckIds.join(','),
    equipmentNumber: searchForm.value.equipmentNumber,
    transactionStartTime: dateRange[0]
      ? proxy.$utils.formatDate(dateRange[0], 'yyyy-MM-dd', true)
      : '',
    transactionEndTime: dateRange[1]
      ? proxy.$utils.formatDate(dateRange[1], 'yyyy-MM-dd', true)
      : '',
  }
  consumptionReportApi
    .fetchList(params)
    .then((res) => {
      if (res.code === 0) {
        const data = res.page || {}
        tableTotal.value = data.totalCount || 0
        tableData.value = data.list || []
      } else {
        message.warning(res.msg)
      }
    })
    .finally(() => {
      isLoadingTable.value = false
    })
}

function getPeriodNameFn(val) {
  if (val) {
    const item = PERIOD_TIME_LIST.find((el) => el.value === val)
    return item ? item.label : val
  } else {
    return val
  }
}

function handleCurrentChange(val) {
  pageNum.value = val
  fetchList()
}

function handleSizeChange(val) {
  pageSize.value = val
  pageNum.value = 1
  fetchList()
}
</script>

<style scoped lang="scss"></style>
